<template>
  <div class="mainContent _mainContent  w_el_tag" id="grzxWerrp" v-cloak>
    <div>
      <el-row :gutter="40" style="margin-left: 0;margin-right: 0;">
        <el-col :span="8">
          <div class="grContent">
            <p class="info">基本信息</p>
            <div class="pic" v-if="info.user">
              <div class="imgPic" @click="editImg">
                <img :src="baseUrl+info.user.avatar">
              </div>
             <userAvatar ref="userAvatar"></userAvatar>
            </div>
          </div>
        </el-col>
        <el-col :span="16" v-if="info.user">
          <div class="grContent grContentR">
            <ul>
              <li class="clearfix">
                <span class="grLable">姓名</span>
                <div class="rightInfo">
                  <input type="text" v-model="info.user.nickName" readonly="readonly">
                </div>
              </li>
              <li class="clearfix">
                <span class="grLable">手机号</span>
                <div class="rightInfo">
                  <input type="text" v-model="info.user.phonenumber" readonly="readonly">
                </div>
              </li>
              <li class="clearfix">
                <span class="grLable">性别</span>
                <div class="rightInfo">
                  <input type="text" :value="info.user.sex=='1'?'男':'女'" readonly="readonly">
                </div>
              </li>
              <li class="clearfix">
                <span class="grLable">邮箱</span>
                <div class="rightInfo" style="line-height: 32px;padding:9px 0 9px 63px;">
                  <span>{{info.user.email}}</span>
                </div>
              </li>
              <li class="clearfix">
                <span class="grLable">角色</span>
                <div class="rightInfo">
                  <input type="text" v-model="info.user.remark" readonly="readonly">
                </div>
              </li>
			  <li class="clearfix">
			    <span class="grLable">个人签名</span>
			    <div class="rightInfo" >
			      <!-- <Upload
			        :limit="1"
			        :isShowTip="false"
					:value="info.user.signPath"
			        @modelValue="modelValue"
			      /> -->
			      <ImageUpload
			        :limit="1"
              :fileSize="5"
			        :isShowTip="false"
					    :value="info.user.signPath"
			        @modelValue="modelValue"
			      />
			    </div>
			  </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import {updatesignPath} from '@/api/system/user'
import Upload from '@/components/FileUpload/index.vue'
import ImageUpload from '@/components/ImageUpload/index.vue'
import userAvatar from "./userAvatar";
export default {
  data() {
    return {
       baseUrl: process.env.VUE_APP_API_URL + process.env.VUE_APP_API_PREFIX,
      img_src: '',
	  userInfo:{},
      cshMm: "",
      newMm: "",
      againMm: "",
      formLabelWidth: "88px"
    };
  },
  components:{
    Upload,
    ImageUpload,
    userAvatar
  },
  computed: {
    ...mapGetters([
      'info'
    ])
  },
  created() {},
  mounted() {
    console.log('asdasdadsasdads',this.info)
  },
  methods: {
    /**头像 */
    editImg() {
      this.$refs.userAvatar.open = true;
    },
	modelValue(list){
		let imageFilePath =list.length?list[list.length-1].url:'';
		updatesignPath({userId:this.info.user.userId,signPath:imageFilePath}).then((label)=>{
			this.$store.dispatch('user/setSignPath',imageFilePath);
			this.info.user.signPath = imageFilePath
		})
	}
  }
};
</script>
<style scoped >
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  display: block;
  clear: both;
  content: " ";
  height: 0;
  visibility: hidden;
}
._mainContent {
  padding-top: 20px;
}
.title {
  font-size: 14px;
  color: #37474f;
  line-height: 24px;
  margin-bottom: 20px;
}
.grContent {
  background-color: #fff;
  text-align: center;
  border: 1px solid #ebeef5;
}
.grContent .info {
  font-size: 16px;
  color: #76838f;
  line-height: 66px;
  border-bottom: 1px solid #f1f1f1;
}
.pic {
  padding-top: 7px;
  height: 240px;
  text-align: center;
}
.pic .imgPic {
  height: 180px;
  padding-top: 22px;
}
.pic .imgPictext {
  line-height: 24px;
  color: #777;
  font-size: 14px;
}
.pic img {
  display: inline-block;
  height: 125px;
  width: 125px;
  border-radius: 50%;
  /* line-height: 228px; */
}
.grContentR {
  border: 1px solid #ebeef5;
  padding: 40px 60px;
  min-height: 752px
}
.grContentR li {
  padding-top: 10px;
  padding-bottom: 10px
}
.grContentR .grLable {
  display: block;
  float: left;
  width: 130px;
  height: 46px;
  line-height: 46px;
  border-bottom: 1px solid #f3f5f7;
  background-color: #f3f5f7;
  font-size: 14px;
  color: #37474f;
}
.rightInfo {
  position: relative;
  text-align: left;
  margin-left: 116px;
  border-bottom: 1px solid #f1f1f1;
  line-height: 46px;
  /* height: 60px; */
  padding-left: 63px;
  font-size: 14px;
  color: #76838f;
}
.rightInfo input {
  border: none;
  height: 46px;
  color: #76838f;
  font-size: 14px;
}
.rightInfo .el-button {
  position: absolute;
  right: 0;
  top: 12px;
}
.grDialog .el-dialog {
  width: 440px;
}
.grDialog .el-dialog__header {
  text-align: left;
}
.grDialog .el-form-item__content {
  position: relative;
}
.grDialog .getCode {
  position: absolute;
  right: 0;
  top: 0;
  width: 90px;
  color: #19c29d;
  line-height: 40px;
}
.rightInfo .yellow {
  color: #f7a769;
}
.depet_job {
  display: block;
}
.grDialog .disabledStyle {
  cursor: no-drop;
}
</style>
